<template>
    <div class="container">
        <img class="logo" :src="imgs.logo" alt="">
        <div class="title">金阳新城智慧停车</div>

        <div class="input">
            <input v-model="phoneNumber" type="number" placeholder="请输入手机号码" />
        </div>
        <div class="input">
            <input v-model="password" type="number" placeholder="请输入验证码" />
            <div class="vercode" @click="getVercode">{{ seconds > 0 ? seconds + "s" : "获取验证码" }}</div>
        </div>

        <div class="btn" @click="login">登录</div>
        <div v-if="!openId" class="btn phone-btn">获取本机手机号</div>
        <button v-else class="btn phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取本机手机号</button>
    </div>
</template>
<script>
import CryptoJs from "crypto-js";
import md5 from "js-md5";
import { Base64 } from "js-base64";
import { getVercodeAPI, getPhoneNumberAPI, getDadaTokenAPI } from "../api/api";
const app = getApp();

export default {
    data() {
        return {
            imgs: app.globalData.imgs,
            phoneNumber: "",
            password: "",
            loading: false,
            openId: "",
            token: "",
            seconds: 0,
            timer: null,
        };
    },
    onShareAppMessage() {},
    onLoad(options) {
        this.loading = true;
        wx.showLoading({
            title: "加载中",
        });
        app.getTempToken().then((res) => {
            let { openId, token } = res;
            this.loading = false;
            this.openId = openId; // parking_openid
            this.token = token;
            wx.hideLoading();
        });
    },
    methods: {
        // 登录
        login() {
            if (this.loading) return false;
            if (!this.phoneNumber) {
                wx.showToast({
                    title: "请输入手机号",
                    icon: "none",
                });
                return false;
            }
            if (this.phoneNumber.length !== 11) {
                wx.showToast({
                    title: "请输入正确手机号",
                    icon: "none",
                });
                return false;
            }
            if (!this.password) {
                wx.showToast({
                    title: "请输入验证码",
                    icon: "none",
                });
                return false;
            }
            this.loading = true;
            wx.showLoading({
                title: "登录中",
            });
            getDadaTokenAPI({
                openid: this.openId,
                authData: this.getAuthData(this.phoneNumber, this.password),
                phoneNumber: this.phoneNumber
            })
                .then((res) => {
                    let dada_token = res;
                    wx.setStorageSync("parking_openid", this.openId);
                    wx.setStorageSync("parking_phone", this.phoneNumber);
                    wx.setStorageSync("dada_token", dada_token);
                    wx.showToast({
                        title: "登录成功",
                        icon: "success",
                    });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1500);
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        // 获取本机手机号
        getPhoneNumber(e) {
            let code = e.detail.code;
            if (code) {
                wx.showLoading({
                    title: "加载中...",
                });
                getPhoneNumberAPI({
                    code,
                    openId: this.openId,
                }).then((res) => {
                    this.phoneNumber = res;
                    this.getVercode();
                });
            } else {
                console.log("获取本机手机号失败", e);
            }
        },
        // 获取验证码
        getVercode() {
            if (this.seconds > 0) return false;
            if (!this.phoneNumber) {
                wx.showToast({
                    title: "请输入手机号",
                    icon: "none",
                });
                return false;
            }
            getVercodeAPI({
                phoneNumber: this.phoneNumber,
            }).then((res) => {
                wx.showToast({
                    title: "验证码已发送",
                    icon: "none",
                });
                if (this.timer) clearInterval(this.timer);
                this.seconds = 60;
                this.timer = setInterval(() => {
                    if (this.seconds > 0) {
                        this.seconds--;
                    } else {
                        clearInterval(this.timer);
                    }
                }, 1000);
            });
        },
        // 手机号和验证码加密
        getAuthData(phoneNumber, password) {
            let key_str = md5(phoneNumber);
            let key = CryptoJs.enc.Utf8.parse(key_str);
            let AESPass = CryptoJs.AES.encrypt(password, key, {
                mode: CryptoJs.mode.ECB,
                padding: CryptoJs.pad.Pkcs7,
            });
            let pass = AESPass.toString();
            return Base64.encode(phoneNumber + ":" + pass).replace(/[\r\n]/g, "");
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
        margin: 100rpx 0 50rpx;
    }
    .title{
        font-size: 40rpx;
        font-weight: bold;
        margin-bottom: 120rpx;
        color: #333;
    }
    .input {
        width: 630rpx;
        padding: 30rpx 0;
        display: flex;
        border-bottom: 1rpx solid #bfbfbf;
        margin-bottom: 10rpx;
        input {
            flex: auto;
        }
        .vercode {
            width: 150rpx;
            text-align: center;
            color: #009cff;
            font-size: 30rpx;
        }
    }
    .btn {
        width: 630rpx;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40rpx;
        font-size: 30rpx;
        color: #fff;
        background-color: #009cff;
        border-radius: 50rpx;
    }
    .phone-btn {
        background-color: #28c445;
    }
}
</style>
